<template>
    <u-navbar title="购物车" :is-back="false" :background="{ background: '#fff' }">
        <view slot="right" class="edit-btn" @click="toggleEdit">
            {{ isEditing ? '完成' : '编辑' }}
        </view>
    </u-navbar>

    <view class="cart-page" :style="pageStyle">
        <!-- 购物车商品项 -->
        <z-paging
            ref="paging"
            v-model="cartItems"
            @query="queryList"
            :fixed="false"
            height="100%"
            use-page-scroll
        >
            <u-swipe-action
                :show="item.showDelete"
                :index="index"
                v-for="(item, index) in cartItems"
                @click="handleSwipeDelete(index)"
                :options="swipeOptions"
            >
                <view class="cart-item">
                    <view class="checkbox">
                        <u-checkbox
                            v-model="item.selected"
                            shape="circle"
                            active-color="#07c160"
                        ></u-checkbox>
                    </view>
                    <image class="product-image" :src="item.line_image" mode="aspectFill" />
                    <view class="product-info">
                        <text class="title">{{ item.title }}</text>
                        <text class="date">出发日期：{{ item.travel_date }}</text>
                        <text class="people"
                            >出行人数：成人 {{ item.adult_count }} / 儿童 {{ item.child_count }}
                        </text>
                        <text class="price"
                            >¥{{ item.price * item.adult_count + item.price * item.child_count }}
                        </text>
                    </view>
                </view>
            </u-swipe-action>
        </z-paging>
        <!-- 底部操作栏 -->
        <view class="bottom-actions">
<!--            <view class="select-all">-->
<!--                <u-checkbox-->
<!--                    shape="circle"-->
<!--                    v-model="isAllSelected"-->
<!--                    active-color="#07c160"-->
<!--                ></u-checkbox>-->
<!--            </view>-->
            <view class="total"
                >合计:
                <view class="total_price">¥{{ selectedTotalPrice }}</view>
            </view>
            <button class="delete-btn" v-if="isEditing" @click="deleteSelected">删除</button>
            <button class="checkout-btn" v-else @click="placeOrder">下单</button>
        </view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef } from 'vue'
import { getCartList } from '@/api/user'
import Tabbar from '@/components/tabbar/tabbar.vue'

const paging = shallowRef()
// 模拟多个购物车数据
const cartItems = ref([
    // {
    //     id: 1,
    //     name: '杭州西湖三日游',
    //     image: '../../static/images/detail_image.png',
    //     selectedDate: '2025/03/01',
    //     price: 899,
    //     adultCount: 2,
    //     childCount: 1,
    //     selected: false,
    //     showDelete: false // 控制滑动菜单是否展开
    // },
    // {
    //     id: 2,
    //     name: '张家界自然风光之旅',
    //     image: '../../static/images/detail_image.png',
    //     selectedDate: '2025/04/01',
    //     price: 1299,
    //     adultCount: 1,
    //     childCount: 0,
    //     selected: false,
    //     showDelete: false
    // }
])

const cartList = async () => {
    const res = await getCartList()
    console.log(res)
}

const queryList = async (pageNo, pageSize) => {
    const { lists } = await getCartList()

    lists.forEach((item: any) => {
        item.showDelete = false
        item.selected = false
    })
    cartItems.value = lists
    paging.value.complete(lists)
}

const placeOrder = async () => {
    const selectedItems = cartItems.value.filter((item: any) => item.selected)


}

// 编辑模式切换
const isEditing = ref(false)

function toggleEdit() {
    isEditing.value = !isEditing.value
}

// 总价计算（仅选中的）
const selectedTotalPrice = computed(() => {
    return cartItems.value.reduce((sum, item) => {
        if (item.selected) {
            sum += item.price * item.adult_count + item.price * 0.5 * item.child_count
        }
        return sum
    }, 0)
})

// 全选控制
// const isAllSelected = computed({
//     get: () => cartItems.value.every((item) => item.selected),
//     set: (val) => {
//         cartItems.value.forEach((item) => (item.selected = val))
//     }
// })

// 滑动删除配置
const swipeOptions = [
    {
        text: '删除',
        style: {
            backgroundColor: '#ff4949'
        }
    }
]

// 滑动时触发
function handleSwipeDelete(index: number) {
    cartItems.value.splice(index, 1)
}

// 点击删除按钮
function deleteSelected() {
    cartItems.value = cartItems.value.filter((item) => !item.selected)
}
</script>
<style lang="scss" scoped>
.edit-btn {
    font-size: 28rpx;
    padding-left: 30rpx;
    color: #07c160;
}

.cart-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.checkbox {
    margin-right: 20rpx;
    flex-shrink: 0;
}

.product-image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 16rpx;
    object-fit: cover;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.date,
.people {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.price {
    font-size: 28rpx;
    color: #07c160;
    font-weight: bold;
}

.bottom-actions {
    position: fixed;
    bottom: 180rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 99;
    gap: 10rpx;
}

.select-all {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
}

.total {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    flex: 1;
}

.total_price {
    font-size: 28rpx;
    color: #07c160;
    display: inline-block;
}

.delete-btn {
    min-width: 260rpx;
    max-width: 300rpx;
    padding: 10rpx 0;
    border-radius: 60rpx;
    font-size: 28rpx;
    background-color: #ff4949;
    color: white;
    text-align: center;
}

.checkout-btn {
    min-width: 260rpx;
    max-width: 300rpx;
    padding: 10rpx 0;
    border-radius: 60rpx;
    font-size: 28rpx;
    background-color: #07c160;
    color: white;
    text-align: center;
}

.checkbox {
    margin-right: 20rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

// 优化复选框内边距
.u-checkbox__box {
    padding: 8rpx;
}
</style>
